import type { ISectionDetails } from '@/interfaces';

export default function QuerySectionSectionGroup({
  details,
}: {
  details: ISectionDetails;
}) {
  const sectionGroup = details.sectionGroup;

  return (
    <div className="row">
      <div className="col">
        <div className="card">
          <div className="card-header bg-transparent text-muted">
            <i className="bi bi-box me-2"></i>
            版块组
          </div>

          <div className="card-body">
            {sectionGroup && (
              <ul className="list-group list-group-flush">
                <li key={sectionGroup.id} className="list-group-item">
                  {sectionGroup.name}
                </li>
              </ul>
            )}

            {!sectionGroup && (
              <div className="text-center text-muted">暂无版块组</div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}
